<template>

  <div>
    <!-- 数据统计 -->

      <Row :gutter="8">
        <Col span="12" class="col-item">
          <Card shadow style="background-color: #FFE9D9; color: #222222;">
            <Row>
              <p style="font-size: 14px;color: #4E4E4E;">今日总收入(元)</p>
              <p style="font-size: 32px;"><b>{{data.list.dayTotalAmount}}</b></p>
            </Row>
            <Row>
               <Col span="8" class="col-item">
                 <p style="font-size: 12px;color: #4E4E4E;">今日订场收入(元)</p>
                 <p style="font-size: 16px;"><b>{{data.list.dayMakeAmount}}</b></p>
               </Col>
               <Col span="8" class="col-item">
                 <p style="font-size: 12px;color: #4E4E4E;">今日运动卡收入(元)</p>
                 <p style="font-size: 16px;"><b>{{data.list.dayCardAmount}}</b></p>
               </Col>
               <Col span="8" class="col-item">
                 <p style="font-size: 12px;color: #4E4E4E;">今日课程收入(元)</p>
                 <p style="font-size: 16px;"><b>{{data.list.dayCourseAmount}}</b></p>

               </Col>
            </Row>
          </Card>
        </Col>
        <Col span="12" class="col-item">
          <Card shadow style="background-color: #FFE9D9; color: #222222;">
            <Row>
              <p style="font-size: 14px;color: #4E4E4E;">本月总收入(元)</p>
              <p style="font-size: 32px;"><b>{{data.list.monthTotalAmount}}</b></p>
            </Row>
            <Row>
               <Col span="8" class="col-item">
                 <p style="font-size: 12px;color: #4E4E4E;">本月订场收入(元)</p>
                 <p style="font-size: 16px;"><b>{{data.list.monthMakeAmount}}</b></p>
               </Col>
               <Col span="8" class="col-item">
                 <p style="font-size: 12px;color: #4E4E4E;">本月运动卡收入(元)</p>
                 <p style="font-size: 16px;"><b>{{data.list.monthCardAmount}}</b></p>
               </Col>
               <Col span="8" class="col-item">
                 <p style="font-size: 12px;color: #4E4E4E;">本月课程收入(元)</p>
                 <p style="font-size: 16px;"><b>{{data.list.monthCourseAmount}}</b></p>

               </Col>
            </Row>
          </Card>
        </Col>

      </Row> <br>
      <Row :gutter="8">

        <Col span="8" class="col-item">
          <Card shadow style="background-color: #FFE9D9; color: #222222;">
            <Row>
              <p style="font-size: 14px;color: #4E4E4E;">今日订场订单</p>
              <p style="font-size: 32px;"><b>{{data.list.dayOrderCount}}</b></p>
            </Row>
            <Row>
               <Col span="12" class="col-item">
                 <p style="font-size: 12px;color: #4E4E4E;">本月订场订单</p>
                 <p style="font-size: 16px;"><b>{{data.list.monthOrderCount}}</b></p>
               </Col>
               <Col span="12" class="col-item">
                 <p style="font-size: 12px;color: #4E4E4E;">订场订单总数</p>
                 <p style="font-size: 16px;"><b>{{data.list.yearOrderCount}}</b></p>
               </Col>
            </Row>
          </Card>
        </Col>
        <Col span="8" class="col-item">
          <Card shadow style="background-color: #FFE9D9; color: #222222;">
            <Row>
              <p style="font-size: 14px;color: #4E4E4E;">今日课程订单</p>
              <p style="font-size: 32px;"><b>{{data.list.dayCourseOrderCount}}</b></p>
            </Row>
            <Row>
               <Col span="12" class="col-item">
                 <p style="font-size: 12px;color: #4E4E4E;">本月课程订单</p>
                 <p style="font-size: 16px;"><b>{{data.list.monthCourseOrderCount}}</b></p>
               </Col>
               <Col span="12" class="col-item">
                 <p style="font-size: 12px;color: #4E4E4E;">课程订单总数</p>
                 <p style="font-size: 16px;"><b>{{data.list.yearCourseOrderCount}}</b></p>
               </Col>
            </Row>
          </Card>
        </Col>
        <Col span="8" class="col-item">
          <Card shadow style="background-color: #FFE9D9; color: #222222;">
            <Row>
              <p style="font-size: 14px;color: #4E4E4E;">今日运动卡订单</p>
              <p style="font-size: 32px;"><b>{{data.list.dayCardOrderCount}}</b></p>
            </Row>
            <Row>
               <Col span="8" class="col-item">
                 <p style="font-size: 12px;color: #4E4E4E;">本月运动卡订单</p>
                 <p style="font-size: 16px;"><b>{{data.list.monthCardOrderCount}}</b></p>
               </Col>
               <Col span="8" class="col-item">
                 <p style="font-size: 12px;color: #4E4E4E;">运动卡订单总数</p>
                 <p style="font-size: 16px;"><b>{{data.list.yearCardOrderCount}}</b></p>
               </Col>
            </Row>
          </Card>
        </Col>
      </Row>

    <br>
    <!-- 最新预约订单列表 -->
    <Row :gutter="8">
      <Col span="21">
      <Card :shadow="true">
        <p slot="title">最新预约订单</p>
        <Table border :columns="newsMakeColumns" :data="data.list.newMakeOrder">
          <template slot-scope="{ row, index }" slot="venue_name">
            {{row.venue_name}} - {{row.number}}号场
          </template>
          <template slot-scope="{ row, index }" slot="action">
            <Button type='warning' @click="makeDetail(row, index)" size='small'>查看</Button>
          </template>
        </Table>
      </Card>
      </Col>
      <Col span="3">
          <Row style="margin-bottom: 27px;">
            <Col span="24" class="col-item">
              <Card shadow style="  color: #222222;">
                <p style="font-size: 14px;color: #4E4E4E;">今日新增用户数(人)</p>
                <p style="font-size: 32px;"><b>{{data.list.dayUserCount}}</b></p>
              </Card>
            </Col>
          </Row>
          <Row style="margin-bottom: 27px;">
            <Col span="24" class="col-item">
              <Card shadow style="  color: #222222;">
                <p style="font-size: 14px;color: #4E4E4E;">本月新增用户数(人)</p>
                <p style="font-size: 32px;"><b>{{data.list.monthUserCount}}</b></p>
              </Card>
            </Col>
          </Row>
          <Row style="margin-bottom: 25px;">
            <Col span="24" class="col-item">
              <Card shadow style=" color: #222222;">
                <p style="font-size: 14px;color: #4E4E4E;">总用户数(人)</p>
                <p style="font-size: 32px;"><b>{{data.list.userCount}}</b></p>
              </Card>
            </Col>
          </Row>
      </Col>
    </Row>
    <!-- 最新购买运动卡订单 -->
    <!-- <Row>
      <Col span="24">
      <Card :shadow="true">
        <p slot="title">最新运动卡订单</p>
        <Table border :columns="newsCardColumns" :data="data.list.newCardOrder">
          <template slot-scope="{ row, index }" slot="action">
            <Button type='warning' @click="cardDetail(row)" size='small'>查看</Button>
          </template>
        </Table>
      </Card>
      </Col>
    </Row><br> -->
    <Row :gutter="8">
      <Col span="12">
      <Card :shadow="true">
        <p slot="title">订单趋势(单位：单)</p>
        <div id="monthOrderEchar" class="echart" style="height: 250px;"></div>
      </Card>
      </Col>
      <Col span="12">
      <Card :shadow="true">
        <p slot="title">收入趋势(单位：元)</p>
        <div id="incomeEchar" class="echart" style="height: 250px;"></div>
      </Card>
      </Col>
    </Row>

    <!-- 查看预约订单详情弹窗 -->
    <!-- @on-ok="ok" @on-cancel="cancel" -->
    <Modal v-model="detailModal" title="订单详情" width='60%'>
      <div class="detail-table">
        <div class="base-info">
          <Row class='row-main-title font16 table-head-bg padding10'>
            <Col span="24">基本信息</Col>
          </Row>
          <Row class='row-main-content'>
            <Col span="8"><span class="font-gray">订单号：</span>{{formItem.detail.order_no}}</Col>
            <Col span="8"><span class="font-gray">交易流水号：</span>{{formItem.detail.callback_trade_no}}</Col>
            <Col span="8"><span class="font-gray">订单状态：</span><label
              style="color: #ff6600;">{{formItem.detail.order_estate_name}}</label></Col>
          </Row>
          <Row class='row-main-content'>
            <Col span="8"><span class="font-gray">门店：</span>{{formItem.detail.store_name}}</Col>
            <Col span="8"><span class="font-gray">类目：</span>{{formItem.detail.venue_name}} -
            {{formItem.detail.number}}号场</Col>
            <Col span="8"><span class="font-gray">预约时间：</span>{{formItem.detail.make_time_range}}</Col>
          </Row>
          <Row class='row-main-content'>
            <Col span="8"><span class="font-gray">姓名：</span>{{formItem.detail.username}}</Col>
            <Col span="8"><span class="font-gray">电话：</span>{{formItem.detail.mobile}}</Col>
            <Col span="8"><span class="font-gray">预约时长：</span>{{formItem.detail.hour}}</Col>
          </Row>
          <Row class='row-main-content'>
            <Col span="8"><span class="font-gray">支付金额：</span>￥{{formItem.detail.amount}}元</Col>
            <Col span="8"><span class="font-gray">支付方式：</span>{{formItem.detail.pay_type_name}}</Col>
            <Col span="8"><span class="font-gray">支付时间：</span>{{formItem.detail.pay_time}}</Col>
          </Row>
          <Row class='row-main-content'>
            <Col span="8"><span class="font-gray">渠道类型：</span>{{formItem.detail.channel==1?'小程序':'手工单'}}</Col>
            <Col span="8"><span class="font-gray">下单时间：</span>{{formItem.detail.create_time}}</Col>
            <Col span="8"><span class="font-gray">取消时间：</span>{{formItem.detail.cancel_time}}</Col>
          </Row>
        </div>

      </div>
      <div slot="footer">
        <Button @click='detailModal=false'>关闭</Button>

      </div>
    </Modal>

    <!-- 查看运动卡订单详情 -->
    <!-- 查看弹窗 -->
    <!-- @on-ok="ok" @on-cancel="cancel" -->
    <Modal v-model="cardDetailModal" title="订单详情" width='60%'>
      <div class="detail-table">
        <div class="base-info">
          <Row class='row-main-title font16 table-head-bg padding10'>
            <Col span="24">基本信息</Col>
          </Row>
          <Row class='row-main-content'>
            <Col span="8"><span class="font-gray">订单号：</span>{{formItem.detail.order_no}}</Col>
            <Col span="8"><span class="font-gray">交易流水号：</span>{{formItem.detail.callback_trade_no}}</Col>
            <Col span="8"><span class="font-gray">订单状态：</span><label style="color: #ff6600;">已充值</label></Col>
          </Row>
          <Row class='row-main-content'>
            <Col span="8"><span class="font-gray">姓名：</span>{{formItem.detail.username}}</Col>
            <Col span="8"><span class="font-gray">电话：</span>{{formItem.detail.mobile}}</Col>
          </Row>
          <Row class='row-main-content'>
            <Col span="8"><span class="font-gray">运动卡名称：</span>{{formItem.detail.card_name}}</Col>
            <!-- <Col span="8"><span class="font-gray">运动卡面额：</span>￥{{formItem.detail.price}}元</Col> -->
            <Col span="8"><span class="font-gray">赠送金额：</span>￥{{formItem.detail.give_amount}}元</Col>
          </Row>
          <Row class='row-main-content'>
            <Col span="8"><span class="font-gray">支付金额：</span>￥{{formItem.detail.amount}}元</Col>
            <Col span="8"><span class="font-gray">支付方式：</span>微信</Col>
            <Col span="8"><span class="font-gray">购买时间：</span>{{formItem.detail.create_time}}</Col>
          </Row>
        </div>

      </div>
      <div slot="footer">
        <Button @click='cardDetailModal=false'>关闭</Button>

      </div>
    </Modal>
  </div>

</template>
<script>
  import {
    getList,
    getDetail,
    getCardDetail
  } from '@/api/home/home.js'


  export default {
    name: 'home',
    components: {


    },
    data() {
      return {
        data: {
          list: [],
        },
        formItem: {
          detail: []
        },
        //预约订单表格列
        newsMakeColumns: [{
            title: 'ID',
            key: 'id',
            width: '80',
          },
          {
            title: '订单编号',
            key: 'order_no'
          },

          {
            title: '门店名称',
            key: 'store_name'
          },
          {
            title: '类目',
            key: 'venue_name',
            slot: 'venue_name',
          },

          {
            title: '姓名',
            key: 'username'
          },
          {
            title: '电话',
            key: 'mobile'
          },

          {
            title: '预约时间',
            key: 'make_time_range',
            width: '170'
          },
          {
            title: '时长',
            key: 'hour',
            width: '70',
          },
          {
            title: '下单时间',
            key: 'create_time',
            width: '160',
          },

          {
            title: '操作',
            slot: 'action',
            width: 70,
            align: 'center',

          }
        ],

        //运动卡订单表格列
        newsCardColumns: [{
            title: 'ID',
            key: 'id',
            width: '80'
            // sortable: true
          },
          {
            title: '订单号',
            key: 'order_no',

          },
          {
            title: '运动卡',
            key: 'name',
            align: 'right',

          },
          {
            title: '姓名',
            key: 'username'
          },
          {
            title: '电话',
            key: 'mobile'
          },
          {
            title: '金额(元)',
            key: 'amount',
            align: 'right'
          },
          {
            title: '赠送金额(元)',
            key: 'give_amount',
            align: 'right'
          },
          {
            title: '购买时间',
            key: 'create_time'
          },
          {
            title: '操作',
            slot: 'action',
            width: 70,
            align: 'center',

          }
        ],
        detailModal: false,
        cardDetailModal: false
      }
    },
    mounted() {
      let _this = this;
    },
    created() {

      this.getList();
    },
    methods: {


      getList() {
        let _this = this;

        let params = {

        }
        getList(params).then(res => {
          if (res.data.status == 1) {
            _this.data.list = res.data.data.list

            _this.$nextTick(function() {
              _this.monthOrderEchar();
              _this.incomeEchar();

            })
          } else {

          }
        }).catch(function(error) {
          // 异常
          console.log(error)
        })

      },
      // 查看
      makeDetail(row) {

        this.rowId = row.id
        this.detailModal = true
        this.view(row.id)
      },
      view(id) {
        let _this = this
        let params = {
          id: id
        }
        getDetail(params).then(res => {
          if (res.data.status == 1) {
            let result = res.data.data
            _this.formItem.detail = result.detail

          } else {
            let config = {
              content: res.data.message,
              background: true
            }
            _this.$Message.error(config)
          }
        }).catch(function(error) {
          // 异常
          console.log(error)
        })
      },
      // 查看
      cardDetail(row) {


        this.cardDetailModal = true

        let _this = this
        let params = {
          id: row.id
        }
        getCardDetail(params).then(res => {
          if (res.data.status == 1) {
            let result = res.data.data
            _this.formItem.detail = result.detail

          } else {
            let config = {
              content: res.data.message,
              background: true
            }
            _this.$Message.error(config)
          }
        }).catch(function(error) {
          // 异常
          console.log(error)
        })
      },
      //订单趋势图
      monthOrderEchar() {
        var chartDom = document.getElementById('monthOrderEchar');
        let myChart = this.$echarts.init(chartDom);

        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: 0,
            top: 10,
            bottom: 0,
            right: 0,
            heoght: 300,
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: this.data.list.monthOrderEchar.month
          },
          color: ['#488BFF'],
          yAxis: {
            type: 'value'
          },
          series: [{
            data: this.data.list.monthOrderEchar.value,
            type: 'bar',
            barWidth: '50%'
          }]
        };

        option && myChart.setOption(option);
      },
      //收入趋势图
      incomeEchar() {
        var chartDom = document.getElementById('incomeEchar');
        let myChart = this.$echarts.init(chartDom);

        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: 0,
            top: 10,
            bottom: 0,
            right: 0,
            heoght: 300,
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: this.data.list.incomeEchar.month
          },
          color: ['#488BFF'],
          yAxis: {
            type: 'value'
          },
          series: [{
            data: this.data.list.incomeEchar.value,
            type: 'bar',
            barWidth: '50%'
          }]
        };

        option && myChart.setOption(option);
      },

    }

  }
</script>

<style lang="scss">
  @import "./main";
</style>
